<template>
  <div>
    <mt-header title="发布笔记">
      <mt-button @click="$router.go(-1)" icon="back" slot="left"
        >返回</mt-button
      >
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>

    <van-form @submit="onSubmit">
      <!-- 图片 -->
      <van-field name="uploader" multiple>
        <template #input>
          <van-uploader name="imgs" v-model="fileList" />
        </template>
      </van-field>
      <!-- 标题 -->

      <van-field
        v-model="title"
        name="title"
        rows="2"
        autosize
        type="textarea"
        maxlength="30"
        placeholder="请填写标题哦~"
        show-word-limit
      />

      <!-- 正文 -->

      <van-field
        v-model="message"
        name="context"
        rows="10"
        autosize
        type="textarea"
        placeholder="正文开始咯"
      />
      <van-field name="radio" label="单选框">
        <template #input>
          <van-radio-group v-model="radio" direction="horizontal">
            <van-radio name="1">户外</van-radio>
            <van-radio name="2">视频</van-radio>
            <van-radio name="3">摄影</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field name="switch" label="定位">
        <template #input>
          <van-switch @click="initAMap" v-model="switchChecked" size="20" />
        </template>
      </van-field> -->
      <van-field v-model="city" name="城市" readonly />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "90f945e9ec76941c795c0178d7626ea7",
};
export default {
  data() {
    return {
      fileList: [
        // { url: "https://img01.yzcdn.cn/vant/leaf.jpg" },
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      switchChecked: false,
      geoloc: "",
      message: "",
      title: "",
      city: "",
      data: "",
      radio: "",
    };
  },

  methods: {
    initAMap() {
      if (this.switchChecked == false) {
        const _this = this;
        AMapLoader.load({
          key: "93371492d174e951d45c8c52eac04144", //设置您的key
          version: "2.0",
          plugins: ["AMap.CitySearch"], //用到的插件都放在这里面
        })
          .then((AMap) => {
            // let map = new AMap.Map("container");
            let CityS = new AMap.CitySearch();
            CityS.getLocalCity(function (status, result) {
              console.log(result);
              _this.city = result.city;
            });
          })
          .catch((e) => {
            console.log(e);
          });
      } else if (this.switchChecked == true) {
        this.city = "";
      }
    },
    // 表单发送
    onSubmit(values) {
      if (this.fileList.length == 0) {
        this.$toast("图片不能为空");
        return;
      } else if (this.title == "") {
        this.$toast("标题不能为空");
        return;
      } else if (this.message == "") {
        this.$toast("内容不能为空");
        return;
      } else if (this.radio == "") {
        this.$toast("类型不能为空");
        return;
      }

      let formData = new FormData();
      // 调用append()方法添加数据
      this.fileList.forEach((item) => {
        formData.append("imgs", item.file);
      });
      console.log(formData.getAll("imgs"));
      // console.log("formData:", formData.getAll("img"));
      this.data = formData.getAll("imgs");
      // console.log("this.data", this.data);

      // formData.append("imgs", file.file);
      // this.data = formData.get("imgs");
      // console.log("this.data,", this.data);
      // console.log(file);
      formData.append("title", this.title);
      formData.append("context", this.message);
      formData.append("type", this.radio);
      let params = {
        title: formData.get("title"),
        context: formData.get("context"),
        type: formData.get("type"),
        imgs: formData.getAll("imgs"),
      };
      console.log("params", params);
      // console.log("imgs", this.fileList);
      console.log("submit", values);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
          accesstoken: this.$store.state.accesstoken,
        },
      };
      let url = `/op/articleDo/saveArticle`;
      this.axios.post(url, formData, config).then((res) => {
        console.log("发布笔记", res);
        if (res.data.code == 2000) {
          this.$messagebox("提示", "发表成功");
          this.$router.push("/mine");
        } else {
          this.$messagebox("提示", "发表失败");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.mint-header {
  background-color: white;
  color: black;
  font-size: 3.6vmin;
}
</style>
